<template>
    <div>
        <div class="wrap">
            <bread-crumb></bread-crumb>
            <h1>不带头像的所有学生信息</h1>
            <el-table id="work-table" :data="tableData" style="width: 100%" border height="500px">
                <el-table-column prop="stu_id" label="学号" width="100">
                </el-table-column>
                <el-table-column prop="stu_name" label="姓名" width="100">
                </el-table-column>
                <el-table-column prop="stu_sex" label="性别" width="100">
                </el-table-column>
                <el-table-column prop="stu_date" label="出生日期" width="100">
                    <template slot-scope="scope">
                        <p>{{scope.$index}}</p>
                        <p>{{$moment(scope.row.stu_date).format('YYYY-MM-DD')}}</p>
                    </template>
                </el-table-column>
            </el-table>
            <el-button @click="exportExcel">将数据导出到本地的excel中</el-button>
        </div>
    </div>
</template>

<script>
import {req_stu_info_nohead} from '@/api/stuinfo.js';
import XLSX from 'xlsx';
import FileSaver from 'file-saver';
/*
导出excel使用两个包 xlsx@^0.16.0  file-saver@2.0.2
npm i -S 包名 或者 --save
npm i -D 包名 或者 --save-dev

npm i -S xlsx@^0.16.0
npm i -S file-saver@^2.0.2
*/
    export default {
        async mounted(){
            let result = await req_stu_info_nohead();
            console.log(result);
            this.tableData=result.data;
        },
        data(){
            return{
                tableData:[],
            }
        },
        methods:{
            exportExcel(){
                console.log('导出到本地excel中');
                // 将table生成工作簿对象 参数一 table对象
                let wb=XLSX.utils.table_to_book(document.getElementById("work-table"),{raw:true});
                // 根据工作簿当中的内容将其变为二进制 输出
                let wbout = XLSX.write(wb,{
                    bookType:"xlsx",
                    bookSST:true,
                    type:"array"
                })
                // 将得到的二进制文件存储到Blob
                try{
                    FileSaver.saveAs(
                        new Blob([wbout],{type:"application/octet-stream"}),
                        "stuInfo.xlsx"
                    )
                }catch(e){
                    console.log(e);
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
div{
    .wrap{
        height:30px;
    }
}
</style>